<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Cache-Control" content="No-Cache">
	<meta http-equiv="Pragma" content="No-Cache">

	<title>우편번호 검색</title>
	
	<link rel="stylesheet" type="text/css" href="/css/common.css" />
	<link rel="stylesheet" type="text/css" href="/css/zipcode.css"/>

	<link href="/css/lib/myconfig.jquery.validate.css" rel="stylesheet" type="text/css"/>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			
			$("#dong").focus();
			
			var resultDiv = $(".result");
			var naviDiv = $(".navi");

			// 탭 메뉴 기능 설정
			var menuli = $(".menutab ul li");
			var frmTab = $(".frmTab");
			
			menuli.each(function(index) {
				$(this).click(function() {
					// 탭메뉴 선택상태 변경
					menuli.removeClass('on').addClass('off');
					menuli.eq(index).removeClass('off').addClass('on');
					
					// 탭 변경
					frmTab.hide();
					frmTab.eq(index).show();
					
					if (index == 0) {
						$("#search_type").val('dong');
					} else {
						$("#search_type").val('street');
					}
					
					// 결과값 초기화
					resultDiv.children().remove();
					naviDiv.children().remove();
					naviDiv.empty();
					$("#page").val(1);
				});
			});

			
			$("#frm_dong").submit(function() {
				$("#btnSearchDong").click();
				return false;
			});
			
			$("#btnSearchDong").click(function() {
				var dongName = $("#dong").val();
				
				if (dongName == '') {
					alert("검색어를 입력해 주세요.");
					return false;
				}
				if (dongName.length < 2) {
					alert("2자리 이상 입력하세요.");
					return false;
				}
				
				$("#page").val(1);
				showListFromAjax();
			});

			$("#frm_street").submit(function() {
				$("#btnSearchStreet").click();
				return false;
			});

			$("#btnSearchStreet").click(function() {
				var streetName = $("#street").val();
				
				if (streetName == '') {
					alert("검색어를 입력해 주세요.");
					return false;
				}
				if (streetName.length < 2) {
					alert("2자리 이상 입력하세요.");
					return false;
				}

				$("#page").val(1);
				showListFromAjax();
			});
		});
		
		// AJAX로 JSON 데이터를 가져와서 화면에 뿌려준다.
		function showListFromAjax() {
			var resultDiv  = $(".result");
			var naviDiv    = $(".navi");

			var searchType = $("#search_type").val();
			var pageNo     = $("#page").val();
			var dongName   = $("#dong").val();
			var cityName   = $("#city").val();
			var streetName = $("#street").val();
			
			// ajax로 우편번호 데이터를 json형식으로 받아온다.
			$.ajax({
				dataType: "jsonp",
				data: {
					search_type: searchType,
					dong: dongName,
					city: cityName,
					street: streetName,
					page: pageNo
				},
				url: "http://www.unsin.co.kr/member/zipcode/json",
				success: function(data) {
					// $("#json-result").html(JSON.stringify(data));
				   	
					// 기존 결과 삭제
					resultDiv.children().remove();
					naviDiv.children().remove();
					naviDiv.empty();

					// 결과 출력
					if (data.total_cnt > 0) {
						//
						resultDiv.append("<span class=\"text\">총<em>"+data.total_cnt+"건</em>이 검색되었습니다.</span>");
						
						var resultCnt = data.zipcode_list.length;
						for (var i=0; i < resultCnt; i++) {
							var resultHtml = "";
							
							if (data.search_type == 'dong') {
								resultHtml += "<dl class=\"zclistdong\">";
								resultHtml += "	<dt class=\"zc\">"+data.zipcode_list[i].zipcode.substring(0,3)+"-"+data.zipcode_list[i].zipcode.substring(3,6)+"</dt>";
								resultHtml += "	<dd class=\"adres\">";
								resultHtml += "		<span class=\"address_full\">"+data.zipcode_list[i].address_full+"</span>";
								resultHtml += "		<span class=\"addr\" style=\"display:none;\">"+data.zipcode_list[i].addr+"</span>";
								resultHtml += "	</dd>";
								resultHtml += "</dl>";
							} else {
								resultHtml += "<dl class=\"zcliststrt\">";
								resultHtml += "	<dt class=\"zc\">"+data.zipcode_list[i].zipcode.substring(0,3)+"-"+data.zipcode_list[i].zipcode.substring(3,6)+"</dt>";
								resultHtml += "	<dd class=\"adres\">";
								resultHtml += "		<span class=\"address_full addr\">"+data.zipcode_list[i].address_full+"</span><br/>";
								resultHtml += "		<span class=\"address_dong\">"+data.zipcode_list[i].address_dong+"</span>";
								resultHtml += "	</dd>";
								resultHtml += "</dl>";
							}
							
							resultDiv.append( resultHtml );
						}
						
						$(".result dl:first").addClass('first');
						$(".result dl:last").addClass('end');
						
						$(".result dl").click(function() {
							var zipcode = $(this).find(".zc").text();
							var addr    = $(this).find(".addr").text();
							// alert(zipcode);
							// alert(addr);
							var of = opener.document.forms[0];
							of.zip_code.value  = zipcode;
							of.addr1.value = addr;

							of.addr2.focus();
							window.close();
//							return false;
						});
						
					} else {
						resultDiv.append("<span class=\"text_no\">조건에 맞는 주소가 없습니다.<br/>다시 확인해주세요.</span>");
					}
					resultDiv.show();
					naviHtml(data.navi);
				},
				error: function() {
					alert("error");
				}
			});
		}
		
		// 페이지 네비게이션
		function naviHtml(navi) {
			var naviHtml = "";
			if (navi.jump_prev_page != '') {
				naviHtml += "<a href=\"javascript:goPage("+navi.jump_prev_page+")\">이전</a> | " 
			}
			
			for (var i=0; i < navi.page_nums.length; i++) {
				if (navi.page_nums[i].page_no == navi.current_page) {
					naviHtml += " <a href=\"javascript:;\" class=\"over\">"+navi.page_nums[i].page_no+"</a> " 
				} else {
					naviHtml += " <a href=\"javascript:goPage("+navi.page_nums[i].page_no+")\">"+navi.page_nums[i].page_no+"</a> " 
				}
			}
			
			if (navi.page_count != '') {
				naviHtml += " ...<a href=\"javascript:goPage("+navi.page_count+")\">"+navi.page_count+"</a> " 
			}

			if (navi.jump_next_page != '') {
				naviHtml += " | <a href=\"javascript:goPage("+navi.jump_next_page+")\">다음</a> " 
			}
			$(".navi").append( naviHtml );
		}

		// 페이지 이동
		function goPage(page) {
			
			$("#page").val(page);
			showListFromAjax();
		}
	</script>

	<script type="text/javascript">
		function enterZipcode(zipcode, addr) {
			var of = opener.document.forms[0];
	
			of.zip_code.value  = zipcode;
			of.addr1.value = addr;
			
			of.addr2.focus();
			window.close();
			return false;
		}
	</script>
</head>

<body>
<input type="hidden" id="search_type" value="dong" />
<input type="hidden" id="page" value="1" />
<div id="wrap">
	<div class="pop">
		<h1><img src="/images/member/ptit_zipcode.png" alt="우편번호검색" /></h1>
		<p class="zigline"></p>
		<div class="zipcode">
			<div class="menutab">
				<ul>
					<li class="on" style="cursor: pointer" >지번주소로 검색</li>
					<li class="end off" style="cursor: pointer" >도로명주소로 검색</li>
				</ul>
			</div>
			<div class="frmTab">
				<form name="frm_dong" id="frm_dong" method="get" autocomplete="off">
					<fieldset>
						<div class="zipcodeBox">
							<p class="popText">* 찾고자 하시는 주소의 동(읍/면/리)을 입력하세요.<br/>예) 수유,두리,무지(두글자 이상)</p>
							<div class="box1">
								<p>
									<em>동(읍/면/리)</em>
									<input type="text" size="20" name="dong" id="dong" value="" title="찾고자 하시는 주소의 동(읍/면/리)을 입력하세요." class="inpText" />
									<a href="javascript:;" id="btnSearchDong"><img src="/images/common/bt_seach.png" alt="검색" align="absmiddle" /></a><br>
									<label class="error" for="dong" generated="true"></label>
								</p>
							</div><!--box2-->
						</div>
					</fieldset>
				</form>
			</div>
			<div class="frmTab" style="display: none">
				<form name="frm_street" id="frm_street" method="get" autocomplete="off">
					<fieldset>
						<div class="zipcodeBox">
							<p class="popText">* 시도를 선택하시고 찾고자 하시는 주소의 도로명(~로/길)을 입력하세요.<br/>예) 소공로,소공로1길(두글자 이상)</p>
							<div class="box2">
								<p>
									<em>시도</em>
									<select id="city" name="city" class="input_select" title="시도를 선택하세요.">
										<option value="">전체</option>
										<option value="서울">서울</option>
										<option value="인천">인천</option>
										<option value="대전">대전</option>
										<option value="부산">부산</option>
										<option value="울산">울산</option>
										<option value="대구">대구</option>
										<option value="광주">광주</option>
										<option value="세종">세종</option>
										<option value="경기">경기</option>
										<option value="강원">강원</option>
										<option value="충남">충남</option>
										<option value="충북">충북</option>
										<option value="경남">경남</option>
										<option value="경북">경북</option>
										<option value="전남">전남</option>
										<option value="전북">전북</option>
										<option value="제주">제주</option>
									</select>
									<em>도로명(~로/길)</em>
									<input type="text" size="18" id="street" name="street" value="" title="찾고자 하시는 주소의 도로명(~로,~길)을 입력하세요." class="inpText" />
									<a href="javascript:;" id="btnSearchStreet"><img src="/images/common/bt_seach.png" alt="검색" align="absmiddle" /></a><br>
									<label class="error" for="street" generated="true"></label>
								</p>
							</div><!--box2-->
						</div>
					</fieldset>
				</form>
			</div>

			<!--우편번호 결과 리스트-->
			<div class="result">
			</div><!--result-->
			<!--//우편번호 결과 리스트-->

			<!--페이지 네비게이션-->
			<div class="navi">
			</div><!--navi-->
			<!--//페이지 네비게이션-->
		</div>
	</div>
	<!--pop--> 
</div>
<!--전체-->

<div id="json-result"></div>
</body>
</html>
